<template>
    <div id="allmap" style="width: 100%; height: 100%"></div>
</template>

<style >
#allmap {
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: 0;
    font-family: '微软雅黑';
}
</style>

<script>
import BMap from 'BMap';
import pro from '@/api/project_house/project.js';
import info from '@/api/lx_infor/lx_infor';
export default {
    data() {
        return {
            maplist: [],
            text: ''
        };
    },
    created() {
            this.test();
    },
    methods: {
        getMap() {
            var map = new BMap.Map('allmap');
            var point = new BMap.Point(120.217891, 30.293282); //默认一个定位。坐标拾取网址：（http://api.map.baidu.com/lbsapi/getpoint/）
            map.centerAndZoom(point, 15);
            var json_data = this.maplist;
            var pointArray = new Array();
            //启用滚轮放大缩小
            map.enableScrollWheelZoom(true);
            var opts = {
                width: 350, // 信息窗口宽度
                height: 200, // 信息窗口高度
                title: '', // 信息窗口标题
                enableMessage: true //设置允许信息窗发送短息
            };
            for (var i = 0; i < json_data.length; i++) {
                var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
                map.addOverlay(marker); //增加点
                pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
                var content = json_data[i][2];
                addClickHandler(content, marker);
            }
            //让所有点在视野范围内
            map.setViewport(pointArray);
            function addClickHandler(content, marker) {
                marker.addEventListener('click', function (e) {
                    openInfo(content, e);
                });
            }
            function openInfo(content, e) {
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            }

            //移动到某一坐标点
            function to(x, y) {
                map.panTo(new BMap.Point(x, y));
            }
        },
        test() {
            

            var list1 = [];
            pro.getMap().then((rep) => {
                if(rep.data[0] == undefined){
                    this.maplist =[]
                    this.getMap()
                }
                for (let a = 0; a < rep.data.length; a++) {
                    info.openInfo(rep.data[a].proId).then(async (reps) => {
                        this.text = reps.data.dto.pronumber;
                        var s = [
                            rep.data[a].cameraX,
                            rep.data[a].cameraY,
                            '<div style="width:100%;">' +
                                rep.data[a].proName +
                                '<table  border="1" style="border-collapse: collapse;overflow-y:auto;font-size:13px;margin: auto;width:100%"> <tr> <td  align="center" style="text-align:center;width:50%;background:#E0E0E0;width:30%;height:40px;">项目编号</td><td align="left" style="text-align:center;">' +
                                this.text +
                                '</tr><tr><td  align="center" style="text-align:center;height:40px;background:#E0E0E0">项目名称</td><td  align="left" style="text-align:center;height:40px">' +
                                rep.data[a].proName +
                                '</tr><tr><td  align="center" style="text-align:center;height:40px;background:#E0E0E0">摄像机类型</td><td  align="left" style="text-align:center;height:40px">' +
                                rep.data[a].cameraType +
                                '</tr><tr><td  align="center" style="text-align:center;height:40px;background:#E0E0E0">经纬度</td><td  align="left" style="text-align:center;height:40px">' +
                                rep.data[a].cameraX +
                                ',' +
                                rep.data[a].cameraY +
                                '</tr>' +
                                '</table></div>'
                        ];
                        list1.push(s);
                        if (a == rep.data.length - 1) {
                            //    this.$nextTick(() => {
                            this.maplist = list1;
                            this.getMap();
                            //    });
                        }
                    });
                }
                
            });
        }
    }
};
</script>
